<template>
	<view class="invoice-container">
    <div class="form-box">
      <u-form :model="form" :rules="rules" ref="uForm" label-width="240rpx">
        <u-form-item label="开票公司" prop="name"><u-input v-model="form.name" /></u-form-item>
        <u-form-item label="统一社会信用代码" prop="intro"><u-input v-model="form.intro" /></u-form-item>
        <u-form-item label="未开发票金额" prop="totalPrice"><u-input v-model="form.totalPrice" disabled type="number" /></u-form-item>
        <u-form-item label="确认开票金额" prop="confirm_price"><u-input v-model="form.confirm_price" type="number" /></u-form-item>
        <u-form-item label="接收邮箱" prop="email"><u-input v-model="form.email" type="email" /></u-form-item>
      </u-form>
    </div>
    <button class="add-btn" style="margin: 20rpx 0" @click="submit">提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        form: {
          //开票公司
          name: '',
          //统一社会信用代码
          intro: '',
          // 未开发票金额
          totalPrice: 0,
          // 确认开票金额
          confirm_price: 0,
          // 接收邮箱
          email: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入开票公司', trigger: 'blur' }
          ],
          intro: [
            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
          ],
          confirm_price: [
            { required: true, message: '请输入确认开票金额', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入合法邮箱', trigger: 'blur', type: 'email' }
          ]
        }
			}
		},
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
		methods: {
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            console.log('验证通过');
            this.$api.invoiceCreate({
              ...this.form,
              member_id: this.$store.state.userInfo.id
            }).then(res => {
              uni.redirectTo({
                url: '/pages/invoice/success'
              });
            });
          } else {
            console.log('验证失败');
          }
        });
      }
		}
	}
</script>

<style lang="scss">
.invoice-container {
  padding: 20rpx;
  .form-box {
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>
